<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.w3.org/1999/xhtml" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
<link type="text/css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
<link type="text/css" th:href="@{/css/userIndex.css}" rel="stylesheet">
<link type="text/css" th:href="@{/css/userCenter.css}" rel="stylesheet">
<link type="text/css" th:href="@{/font-awesome-4.7.0/css/font-awesome.min.css}" rel="stylesheet">
<script type="text/javascript" th:src="@{/js/bootstrap.min.js}"></script>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>个人中心</title>
</head>
<body>

<!--头部-->
<nav th:replace="publicPage/userIndex_bar::headerBar"></nav>

<!--内容-->
<div class="container" style="min-height: 127px;margin-top:60px;" id="contentContainer">
    <div class="row">
        <!--左边-->
        <div class="col-md-2" id="leftUserCenter">
            <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                <div class="panel panel-default" style="background-color: #cdd1d6">
                    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                        <ul class="nav nav-pills nav-stacked">
                            <li role="presentation" style="background-color: white" class="clickLi userInfo-page"><a href="#">个人资料</a></li>
                            <li role="presentation" style="background-color: white" class="clickLi userSecurity-page"><a href="#">安全设置</a></li>
                            <li role="presentation" style="background-color: white" class="clickLi userOrder-page" sec:authorize="hasRole('EMPLOYEE')"><a href="#">订单查看</a></li>
                        </ul>
                    </div>
                </div>
                <div class="panel panel-primary">
                    <div class="panel-heading">公告</div>
                    <div class="panel-body">
                        食品安全我们永远放在第一位！
                    </div>
                </div>
            </div>
        </div>
        <!--右边:个人设置-->
        <div class="col-md-10">
            <div id="userInfo-page" class="text-center" style="margin-top:0px">
                <input type="hidden" id="avatatUrlHidden">
                <div class="row">
                    <div class="col-md-1">
                        <img class="img-rounded" width="100" height="100" id="avatarImg">
                    </div>
                    <div class="col-md-4" style="margin-top: 30px;">
                        <div class="file-container" style="display:inline-block;position:relative;overflow: hidden;vertical-align:middle">
                            <button class="btn btn-success fileinput-button" type="button">更换头像</button>
                            <input type="file" id="imgTest" style="position:absolute;top:0;left:0;font-size:34px; opacity:0" onchange="imgChange()" accept=".gif,.jpg,.jpeg,.png">
                        </div>
                    </div>
                    <div class="col-md-4" style="margin-top:35px;margin-left:-40px">
                        <span style="color: red">需要保存信息后头像图片才能生效哦~</span>
                    </div>
                </div><br><br>

                <div class="row">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label for="username" class="col-md-1 control-label">昵称</label>
                            <div class="col-md-offset-1 col-sm-6" style="margin-left:95px" id="usernameDiv">
                                <input type="text" class="form-control" id="username" placeholder="用户名">
                                <span id="helpBlockUsername" class="help-block" style="text-align: left"></span>
                            </div>
                        </div>
                        <hr>
                        <div class="form-group">
                            <label class="col-md-1 control-label">手机</label>
                            <div class="col-md-3" style="margin-left:95px;margin-top:6px">
                                <p id="phoneP"></p>
                            </div>
                        </div>
                        <hr>
                        <div class="form-group">
                            <label class="col-md-1 control-label">性别</label>
                            <div class="col-md-4" style="margin-left:6px">
                                <label class="radio-inline">
                                    <input type="radio" name="gender" value="M" id="gender_man">男
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="gender" value="F" id="gender_woman">女
                                </label>
                                <br>
                                <label style="color: orange" control-label id="genderLabel" style="text-align: left"></label>
                            </div>
                        </div>
                        <hr>
                        <div class="form-group">
                            <label for="email" class="col-md-1 control-label">email</label>
                            <div class="col-md-offset-1 col-sm-6" style="margin-left:95px" id="emailDiv">
                                <input type="text" class="form-control" id="email" placeholder="电子邮箱">
                                <span id="helpBlockEmail" class="help-block" style="text-align: left"></span>
                            </div>
                        </div>
                        <hr>
                        <div class="form-group">
                            <label class="col-md-1 control-label">姓名</label>
                            <div class="col-md-3" style="margin-left:22px;margin-top:6px">
                                <p id="realNameP"></p>
                            </div>
                        </div>
                        <hr>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-6">
                                <button type="button" class="btn btn-success" id="updateUserInfoButton">修改信息</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <!--右边-安全设置-->
            <div id="userSecurity-page" class="text-center">
                <div class="row">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label for="username" class="col-md-1 control-label">手机号</label>
                            <div class="col-md-offset-1 col-sm-6" style="margin-left:95px" id="phoneDiv">
                                <input type="text" class="form-control" id="phone" placeholder="手机号">
                                <span id="helpBlockPhone" class="help-block" style="text-align: left"></span>
                            </div>
                        </div>
                        <hr>
                        <div class="form-group">
                            <label class="col-md-1 control-label">密码</label>
                            <div class="col-md-offset-1 col-sm-6" style="margin-left:95px" id="passwordDiv">
                                <input type="password" class="form-control" id="password" placeholder="密码" >
                                <span id="helpBlockPassword" class="help-block" style="text-align: left"></span>
                            </div>
                        </div>
                        <hr>
                        <div class="form-group">
                            <label class="col-md-2 control-label" style="margin-left:-72px">确认密码</label>
                            <div class="col-md-offset-1 col-sm-6" style="margin-left:95px" id="confirmPasswordDiv">
                                <input type="password" class="form-control" id="confirmPassword" placeholder="确认密码">
                                <span id="helpBlockConfirmPassword" class="help-block" style="text-align: left"></span>
                            </div>
                        </div>
                        <hr>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-6">
                                <button type="button" class="btn btn-success" id="updateUserPasswordButton">修改密码</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <!--右边：订单查看-->
            <div id="userOrder-page" sec:authorize="hasRole('EMPLOYEE')">
                <div class="row">
                    <div class="col-md-12"><h2>我的订单</h2></div>
                </div><br><br>
                <div class="row">
                    <div class="col-md-11 col-md-offset-1" id="orderTableDiv">
                    <table class="table table-bordered">
                        <thead>
                        <tr>
                            <th>订单号</th>
                            <th>总价</th>
                            <th>配送状态</th>
                            <th>订单状态</th>
                            <th>查看</th>
                        </tr>
                        </thead>
                        <tbody id="orderTbody">

                        </tbody>
                    </table>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12 text-center" id="order_setPage"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--查看订单模态框-->
<div class="modal fade" id="checkOrderModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" sec:authorize="hasRole('EMPLOYEE')">
    <div class="modal-dialog" role="document" style="width: 840px;height: 400px">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">订单详情</h4>
            </div>
            <div class="modal-body">
                <div class="container" id="checkOrderContainer">
                    <!--菜品信息-->
                    <div class="row">
                        <div class="col-md-7" style="background-color: #f2ffff">菜品信息</div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <table class="table table-bordered" border="0" style="width: 800px;font-size: 12px" id="foodModal">
                                <tbody id="modalTbody"></tbody>
                            </table>
                        </div>
                    </div>
                    <!--员工地址信息-->
                    <div class="row">
                        <div class="col-md-7" style="background-color: #f2ffff">员工地址信息</div>
                    </div>
                    <div class="row">
                        <div class="col-md-12" style="margin-top:6px;font-size: 12px">
                            地址：<span id="addressModal"></span>
                        </div>
                    </div>
                    <!--支付及结算信息-->
                    <br>
                    <div class="row">
                        <div class="col-md-7" style="background-color: #f2ffff;margin-top:9px">支付及结算信息</div>
                    </div>
                    <div class="row" style="margin-top:6px;font-size: 12px">
                        <div class="col-md-5">
                            支付方式：<span id="payMethodModal"></span>
                        </div>
                        <div class="col-md-5">
                            支付总额：<span id="totalMoneyModal" style="font-weight: bolder"></span>元
                        </div>
                    </div>
                    <!--订单信息-->
                    <br>
                    <div class="row">
                        <div class="col-md-7" style="background-color: #f2ffff;margin-top:9px">订单状态</div>
                    </div>
                    <div class="row" style="margin-top:6px;font-size: 12px">
                        <div class="col-md-5">
                            配送状态：<span id="mealSpan"></span>
                        </div>
                        <div class="col-md-5">
                            配送人：<span id="mealPeopleSpan"></span>
                        </div>
                        <br>
                        <div class="col-md-5">
                            配送人联系电话：<span id="mealPeoplePhoneSpan"></span>
                        </div>
                        <div class="col-md-5">
                            订单状态：<span id="orderSpan"></span>
                        </div>
                        <br>
                        <div class="col-md-5">
                            下单时间：<span id="orderTime"></span>
                        </div>
                        <div class="col-md-5">
                            您挑选的配送时间：<span id="edelTime"></span>
                        </div>
                        <div class="col-md-5">
                            接单时间：<span id="acceptOrderTime"></span>
                        </div>
                        <div class="col-md-5">
                            送达时间：<span id="sendTime"></span>
                        </div>
                    </div>
                </div>
            </div>
            <!--按钮-->
            <div class="modal-footer" style="text-align: center" id="buttonModal">
                <!--<button type="button" class="btn btn-primary" id="toOrderPage">确定订单，马上支付</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>-->
            </div>
        </div>
    </div>
</div>

<!--尾部-->
<footer th:replace="publicPage/userIndex_bar::footerBar"></footer>
<script type="text/javascript" th:src="@{/js/userPublicBar.js}"></script>
<script type="text/javascript" th:src="@{/js/userCenter.js}"></script>
<script type="text/javascript" th:src="@{/layer/layer.js}"></script>
</body>
</html>